<template>
	<view class="content">
		<view class="topNav">
			<!-- 冒号代表后面接的是变量 topType==0?'selected':null 这个则是条件表达式 -->
			<view :class="[topType==0?'selected':null]" @tap="topType=0">推荐</view>
			<view :class="[topType==1?'selected':null]" @tap="topType=1">视频</view>
			<view :class="[topType==2?'selected':null]" @tap="topType=2">图片</view>
			<view :class="[topType==3?'selected':null]" @tap="topType=3">笑话</view>
		</view>
		<view class="bottomContent">
			<!-- 轮播图 -->
			<swiper class="indexSwiper" :current="topType" @change="swiperChange">
				<!--轮播的每一项 -->
				<swiper-item>推荐的内容</swiper-item>
				<swiper-item><view class="videoItem" v-for="(item,index) in videoList" :key="index" @tap="getDetail(item)">
						<view class="topUser">
							<image :src="item.u.header[0]" class="topUserPhoto"></image>
							<text class="topUserName">{{item.u.name}}</text>
						</view>
						<view class="videoText">
							<text>#{{item.cate}}#</text>
							{{item.text}}
							<video src="item.divSrc" width=100% class="videoPlay"></video>
						</view>
						<!--这是贴子回复 这个时候在这个地方，我们遍历了回复信息   c代表每一项回复 -->
						<view class="replay" v-for="(c,c_index) in item.top_comments" :key="c_index">
							<view class="replayUser">
								<image :src="c.u.header[0]" class="topUserPhoto"></image>
								<view class="topUserName">{{c.u.name}}</view>
								<view class="right">
									<text class="icon-zan iconfont"></text>
									{{c.like_count}}
								</view>
							</view>
							<!-- 评论的内容 -->
							<view class="replayText">
								{{c.content}}
							</view>
						</view>
						<view class="bottomZaiCai">
							<view>
								<text class="icon-zan iconfont"></text>
								{{item.up}}
							</view>
							<view>
								<text class="icon-cai iconfont"></text>
								{{item.down}}
							</view>
							<view>
								<text class="icon-forward iconfont"></text>
								{{item.forward}}
							</view>
						</view>
					</view></swiper-item>
					
				<swiper-item>图片的内容</swiper-item>
				
				<swiper-item>
					<!--笑话 -->
					<!--v-for是遍历某一个集合，item代表遍历出来的每一项，index代表索引  @tap代表触摸以后的事件-->
					<view class="jokeItem" v-for="(item,index) in jokeList" :key="index" @tap="getDetail(item)">
						<view class="topUser">
							<image :src="item.u.header[0]" class="topUserPhoto"></image>
							<text class="topUserName">{{item.u.name}}</text>
						</view>
						<view class="jokeText">
							<text>#{{item.cate}}#</text>
							<!-- 双花括号里在的东西我们代表变量-->
							{{item.text}}
						</view>
						<!--这是贴子回复 这个时候在这个地方，我们遍历了回复信息   c代表每一项回复 -->
						<view class="replay" v-for="(c,c_index) in item.top_comments" :key="c_index">
							<view class="replayUser">
								<image :src="c.u.header[0]" class="topUserPhoto"></image>
								<view class="topUserName">{{c.u.name}}</view>
								<view class="right">
									<text class="icon-zan iconfont"></text>
									{{c.like_count}}
								</view>
							</view>
							<!-- 评论的内容 -->
							<view class="replayText">
								{{c.content}}
							</view>
						</view>
						<view class="bottomZaiCai">
							<view>
								<text class="icon-zan iconfont"></text>
								{{item.up}}
							</view>
							<view>
								<text class="icon-cai iconfont"></text>
								{{item.down}}
							</view>
							<view>
								<text class="icon-forward iconfont"></text>
								{{item.forward}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		//data代表页面上面所有的数据 也就是MVVM数据驱动页面的所有数据
		data() {
			return {
				//上面切换的导航栏样式   我们假设0是第一个“推荐”
				//当topType=0则说明第一个被选中了，第一个被选中了，就说明 第一个需要添加selected的样式
				topType: 3,
				//定义一个数组，用于保存从服务器获取的笑话列表
				jokeList: [],
				videoList:[],
			}
		},
		onLoad() {
			//准备一个url
			var url = "https://www.softeem.xin/s/v2/topic/list/29/25362079-29587762/budejie-android-8.0.1/0-25.json?device=MIX&t=1560323033309&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1";
			//浏览器发起请求，去请求上面的服务器地址
			//显示一个加载的状态出来
			uni.showLoading({
				title:"正在加载"
			});
			uni.request({
				url:url,
				//success代表成功，res代表response或result  也就是请求的结果
				success:res=>{
					console.log(res.data.list);
					//我现在要把上面的些笑话显示在页面上面，怎么办呢					//之前，我一直跟大家说，要做到数据驱动页面   用数据管理页面
					this.jokeList = res.data.list;
					//当数据请求完成以后，就应该当加载的动画去消息掉
					uni.hideLoading();
				}
			})
			var url = "https://www.softeem.xin/s/v2/topic/list/1/0-0/budejie-android-8.0.1/0-25.json?device=MIX&t=1560476719669&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1";
			//浏览器发起请求，去请求上面的服务器地址
			//显示一个加载的状态出来
			uni.showLoading({
				title:"正在加载"
			});
			uni.request({
				url:url,
				//success代表成功，res代表response或result  也就是请求的结果
				success:res=>{
					console.log(res.data.list);
					//我现在要把上面的些笑话显示在页面上面，怎么办呢					//之前，我一直跟大家说，要做到数据驱动页面   用数据管理页面
					this.videoList = res.data.list;
					this.videoList.forEach(item=>{
						if(item.video!=null&&item.video!=undefined){
							item.vidSrc=item.video.download[0];
						}
						else{
							item.vidSrc=""
						}
					}
					
					)
					//当数据请求完成以后，就应该当加载的动画去消息掉
					uni.hideLoading();
				}
			})
		},
		methods: {
			swiperChange(event) {
				//这个event是事件对象，它可以告诉我，你当前滚动到了那一个
				//this.topType指的就是data()里面的topType
				this.topType = event.detail.current;
			},
			getDetail(item){
				//当前点击项的贴子信息  我们只要把这个信息【放】到缓存当中去就可以了
				uni.setStorageSync("currentItem",item);
				
				//点击以后调用方法，跳转到新页面去
				//navigateTo跳转的页面有返回箭头
				uni.navigateTo({
					url:"/pages/detail/detail"
				});
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		overflow: auto;
		/*如果超出了我的部分就给一个滚动条*/
	}

	.topNav {
		display: flex;
		height: 80upx;
		/*40px转成了80upx*/
		background-color: #FFFFFF;
		justify-content: space-around;
		/*左右分散对齐*/
		border-bottom: 1px solid #d3d3d3;
	}

	.topNav view {
		height: 80upx;
		/*与父级元素的高度保存一致*/
		display: flex;
		/* 默认横轴为主轴 */
		align-items: center;
		/*副轴居中*/
		/*设置字体的大小*/
		font-size: 32upx;
	}

	/*上面的选项选中以后的样式*/
	.selected {
		font-weight: bold;
		border-bottom: 2px solid #ff0000;
		box-sizing: border-box;
		/*盒子大小固定*/
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
		display: flex;
		/*弹性盒子  默认是横排的*/
		flex-direction: column;
		/*让里面的元素竖着排*/
	}

	.bottomContent {
		/*父级元素必须是弹性盒子*/
		flex: 1;
	}

	.indexSwiper {
		height: 100%;
	}

	.jokeItem {
		background-color: #FFFFFF;
		padding: 20upx;
		box-sizing: border-box;
		/*设置了padding以后一定要设置box-sizing保持盒子的大小不变*/
		margin-top: 20upx;
	}
	.videoItem {
		background-color: #FFFFFF;
		padding: 20upx;
		box-sizing: border-box;
		/*设置了padding以后一定要设置box-sizing保持盒子的大小不变*/
		margin-top: 20upx;
	}

	.topUserPhoto {
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
	}

	.topUserName {
		font-size: 28upx;
		margin-left: 20upx;
	}

	.topUser {
		display: flex;
		height: 60upx;
		align-items: center;
		/*副轴居中   上下居中*/
	}

	.jokeText {
		font-size: 28upx;
		font-weight: bold;
		line-height: 52upx;
	}
	.videoText {
		font-size: 28upx;
		font-weight: bold;
		line-height: 52upx;
	}

	.jokeText text {
		color: #ffa500;
		margin-right: 10upx;
	}
	.videoText text {
		color: #ffa500;
		margin-right: 10upx;
	}
	.videoPlay{
		align-items: center;
	}

	/*底部的赞和踩*/
	.bottomZaiCai {
		height: 64upx;
		display: flex;
		/*弹性盒子,默认横排*/
		justify-content: space-around;
		font-size: 20upx;
		align-items: center;
	}

	/*贴子的回复*/
	.replay {
		background-color: #F2F2F2;
		padding: 8upx;
		box-sizing: border-box;
	}

	.replayUser {
		display: flex;
		/*弹性盒子,横排*/
		height: 60upx;
		align-items: center;
		/*上下居中*/
	}

	.replayUser .right {
		font-size: 20upx;
	}

	.replayUser .topUserName {
		flex: 1;
		/*中间撑开*/
	}

	.replayText {
		font-size: 20upx;
		line-height: 40upx;
		margin-top: 10upx
	}
	.indexSwiper swiper-item{
		height: 100%;
		overflow-y: auto;
	}
</style>
